<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="register-list">
		<view class="register-item flex-row-center" v-for="num in 12" :key="num">
			<view class="item-left flex-row-center">
				<image src="../../static/logo.png" class="ava" mode="aspectFill"></image>
				<view class="item-info flex">
					<text class="name">张三王麻子张三王麻子</text>
					<text class="details">组队信息组组队信息组队信息组组队信息</text>
				</view>
				<template>
					<text class="state pass">审核中</text>
				</template>
			</view>
			<view class="item-close flex-center">
				<up-icon name="close" color="#9D9FA0" size="22rpx"></up-icon>
			</view>
		</view>
		<view class="view-more">
			<up-loadmore :status="status" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const status = ref('loading')
</script>

<style lang="scss" scoped>
	.register-list {
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.register-item {
		width: 100%;
		justify-content: space-between;

		&:not(:last-child) {
			margin-bottom: 52rpx;
		}

		.item-left {
			.ava {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.item-info {
				flex-direction: column;
				justify-content: space-between;
				margin-right: 120rpx;
				width: 240rpx;
				.name {
					font-weight: bold;
					font-size: 28rpx;
					color: #CDCECE;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;
					overflow: hidden;
				}

				.details {
					font-weight: 500;
					font-size: 24rpx;
					color: #5D5F61;
					margin-top: 6rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;
					overflow: hidden;
				}
			}
		}

		.state {
			font-weight: 500;
			font-size: 28rpx;
			color: #9E9FA0;
		}

		.pass {
			color: #68B9B0;
		}

		.fail {
			color: #5D5F61;
		}

		.item-close {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			border: 2rpx solid #9D9FA0;
		}
	}
</style>